<template>
<div>
  <div class="logo">
    <img v-show="this.imgurl!=''" :src="this.imgurl"  title="点击修改图片">
    <img v-show="this.imgurl==''" src="../assets/logo.png"  title="点击修改图片">
  </div>
  <van-field
      v-model="phone"
      name="phone"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
      v-model="passwd"
      type="password"
      name="passwd"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" @click="logoin">登录</van-button>
  </div>
<!--  -->
  <div class="register">
    <router-link to="/" tag="span">暂不登录</router-link>
    <router-link to="/register" tag="span">注册</router-link>
  </div>

</div>
</template>

<script>
import userHtpp from "../api/user";
import {Toast} from "vant";
export default {
  name: "logoin",
  data(){
    return{
      phone:'',
      passwd:'',
      mourl:'../assets/logo.png',
      imgurl:'',
      obj:'',
    }
  },
  created() {
    //
    let da=JSON.parse(sessionStorage.getItem('user'))
    if(da==undefined){
      return
    }
    this.obj=da;
  },
  methods:{
    //登录界面
    logoin(){
      let obj={
        "passwd":this.passwd,
        "phone":this.phone,
      }
      //登录中账号与注册账号匹配成功后显示图片
      if(obj.passwd!==''&&obj.phone!==''){
        Toast('登录成功!')
        sessionStorage.setItem("token",JSON.stringify('12345'))
        let txt=this.$store.state.path.topath
        if(txt===''||txt==='/register'){
          this.$router.push('/')
          return
        }
        this.$router.push(this.$store.state.path.topath)
      }else {
        Toast('登录失败！')
      }
      // userHtpp.post('/wns/login',obj).then(res=>{
      //
      // })
    }
  },
  watch:{
      phone(newphone,oldphone){
        console.log(newphone)
        if(newphone==this.obj.phone){
            this.imgurl=this.obj.fileName;
        }
      },
      immediate:true
  }
}
</script>

<style scoped lang="less">
.logo{background: #fff;margin:20px 0;position:relative;left:50%;top:50%;width:30%;height:30%;border-radius:100%;transform:translateX(-50%);overflow: hidden;img{vertical-align:center;width:100%}}
.register{display: flex;justify-content:space-around;margin-right:20px;color: #000;font-size: 14px;}
</style>